<div class="cx-address-card card">
  <div class="card-header" *ngIf="address?.defaultAddress && !editMode">
    &#10003; DEFAULT
  </div>
  <div class="card-body" [class.cx-address-card--delete-mode]="editMode">
    <div *ngIf="editMode" class="cx-address-card__delete-msg">
      Are you sure you want to delete this address?
    </div>
    <div class="address_data">
      <div class="cx-address-card__label--bold">
        {{ address?.firstName }} {{ address?.lastName }}
      </div>
      <div class="cx-address-card__label">{{ address?.line1 }}</div>
      <div class="cx-address-card__label">{{ address?.line2 }}</div>
      <div class="cx-address-card__label">
        {{ address?.town }},
        <span *ngIf="!address?.region?.isocode">{{
          address?.country?.isocode
        }}</span
        ><span>{{ address?.region?.isocode }}</span>
      </div>
      <div class="cx-address-card__label">{{ address?.postalCode }}</div>
      <div class="cx-address-card__label">{{ address?.phone }}</div>
    </div>

    <div *ngIf="editMode" class="row cx-address-card__delete">
      <div class="col-md-6">
        <button class="btn btn-block btn-secondary" (click)="cancelEdit()">
          cancel
        </button>
      </div>
      <div class="col-md-6">
        <button
          (click)="deleteAddress(address.id)"
          class="btn btn-block btn-primary"
        >
          delete
        </button>
      </div>
    </div>
    <div *ngIf="!editMode" class="cx-address-card__actions">
      <a
        *ngIf="!address?.defaultAddress"
        (click)="setAddressAsDefault(address.id)"
        class="card-link btn-link set-default"
        >set as default</a
      >
      <a (click)="openEditFormEvent()" class="card-link btn-link edit">edit</a>
      <a (click)="setEditMode()" class="card-link btn-link delete">delete</a>
    </div>
  </div>
</div>
